
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>

    <script src="js/login-status.js"></script>
    <style>
        .fa {
            font-size: 35px;
            line-height: 15px;
        }

        .navbar-brand {
            font-size: 35px;
            font-family: 楷体;
            color: #225EB8;
        }

        .ding {
            font-size: 25px;
            color: black;
        }
        .tab-content>.tab-pane{
            border: 2px solid black;
            background-color: #FFF;
        }
        .nav-tabs>li>a{
            margin-right: 0px;
            border-radius: 0px;

        }
        body{
            background-color: #F5F5F5;
        }
        table{
            border-bottom: 2px solid black;
        }
        .nav-tabs {
            background-color: #FFF;
            border-top: 2px solid black;
            border-right: 2px solid black;
            border-left: 2px solid black;
        }
        .row{

            background-color: #FFF;
        }
        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
            border: 0px;
        }
    </style>
</head>
<body>
<nav class="nav navbar-static-top navbar-default navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="shop_show.html" class="navbar-brand"><i class="fa fa-space-shuttle"></i>&nbsp;&nbsp;火&nbsp;&nbsp;箭&nbsp;&nbsp;速&nbsp;&nbsp;购&nbsp;&nbsp;<i
                    class="fa fa-rocket"></i></a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <ul class="nav nav-tabs" id="orderTabs">
                <li><a href="#unpayOrders" data-toggle="tab" class="ding" id="0">未支付订单</a></li>
                <li><a href="#payOrders" data-toggle="tab" class="ding" id="1">已支付订单</a></li>
                <li><a href="#calOrders" data-toggle="tab" class="ding" id="2">已取消订单</a></li>
            </ul>
            <div class="tab tab-content" id="app">
                <div id="unpayOrders" class="tab tab-pane active">
                    <table class="table" v-for="order in unpayedOrders" id="money">
                        <tr>
                            <td colspan="3">订单日期:{{order.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{order.orderNo}}</td>
                            <td></td>
                            <td></td>

                        </tr>
<!--                        <%&#45;&#45;                        v-for="o in order.orders"&#45;&#45;%>-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.ogoodImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">商品名:{{o.ogoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td>价格:{{o.ogoodPrice}}元</td>
                            <td>数量:{{o.onum}}</td>

                        </tr>
                        <tr>
                            <td>
                                <span>总金额：{{order.orderMoney}}元</span>
                            </td>
                            <td></td>
                            <td></td>
                            <td>
                                <button class="btn btn-primary" style="float: right" onclick="updateCancelOrder(this)"
                                        :id="order.orderNo">取消订单
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger" style="float: right" onclick="gotoSettleCount(this)" :orderId="order.orderNo" :orderAmout="order.orderMoney">继续支付
                                </button>
                            </td>
                        </tr>
                    </table>

                </div>
                <div id="payOrders" class="tab tab-pane active">
                    <table class="table" v-for="order in payedOrders">
                        <tr>
                            <td colspan="3">订单日期:{{order.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{order.orderNo}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.ogoodImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">商品名:{{o.ogoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td>价格:{{o.ogoodPrice}}元</td>
                            <td>数量:{{o.onum}}</td>

                        </tr>
                        <tr>
                            <td><span>总金额：{{order.orderMoney}}元</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>

                </div>
                <div id="calOrders" class="tab tab-pane active">
                    <table class="table" v-for="order in cancelOrders">
                        <tr>
                            <td colspan="3">订单日期:{{order.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{order.orderNo}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.ogoodImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">商品名:{{o.ogoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td>价格:{{o.ogoodPrice}}元</td>
                            <td>数量:{{o.onum}}</td>
                        </tr>
                        <tr>
                            <td><span>总金额：{{order.orderMoney}}元</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            unpayedOrders: [], //未支付订单
            payedOrders: [], //已支付订单
            cancelOrders: [],//已取消订单
        }
    })

    function updateCancelOrder(btnTag) {
        var no = $(btnTag).prop('id');
        console.log(no);
        $.ajax({
            url: 'orders/ChangeStatus',
            type: 'get',
            dataType: 'json',
            data: {no: no, status:2}
        });

        getOrders(0);
    }

    function getOrders(status) {
        $.ajax({
            url: 'orders',
            type: 'get',
            dataType: 'json',
            data: {status: status},
            success: function (_data) {
                // console.log(this)
                console.log(_data)
                console.log(status)
                if ('2' == status) {

                    //已取消订单
                    console.log("已取消订单")
                    console.log(status)
                    vm.cancelOrders = [];
                    for (var i = 0; i < _data.length; i++) {
                        vm.cancelOrders.push(_data[i]);
                    }
                }
                if ('1' == status) {  //表示已支付订单
                    console.log("已支付订单")
                    console.log(status)
                    vm.payedOrders = [];

                    for (var i = 0; i < _data.length; i++) {
                        vm.payedOrders.push(_data[i]);
                    }
                } else {
                    //未支付订单
                    console.log("未支付订单")
                    console.log(status)
                    vm.unpayedOrders = [];

                    for (var i = 0; i < _data.length; i++) {
                        vm.unpayedOrders.push(_data[i]);
                    }
                }
            }
        })
    }

    getOrders(0);  //默认获取未支付订单

    // 当用户点击的时候触发
    $('#orderTabs a').click(function () {
        // $(this).parent('.active'); //当前标签包含了 active 这个class的父标签
        if ($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            getOrders(status);
            $(this).tab('show');   // 让对应的tab展示
        }
    })


    //点击继续支付带订单数据跳转结算页面
    function gotoSettleCount(btnTag) {
        var orderNo = $(btnTag).attr('orderId');
        var amount = $(btnTag).attr('orderAmout');
        console.log(orderNo+"=======",amount)
        // $.ajax({
        //     url: 'alipay',
        //     dataType: 'HTML',
        //     type: 'post',
        //     data: {WIDout_trade_no: orderNo,WIDtotal_amount:amount, WIDsubject:"火箭速购",WIDbody:"TEST",method: 'doPay'},
        //     success: function(_data) {
        //         console.log(_data);
        //         $('#payModal').modal('hide');
        //         // 支付成功
        //         $('body').append(_data);
        //         $("form").attr("target", "_blank");
        //         /*  let divForm = document.getElementsByTagName('divform')
        //           if (divForm.length) {
        //               document.body.removeChild(divForm[0])
        //           }
        //           const div=document.createElement('divform');
        //           div.innerHTML=resp.data; // data就是接口返回的form 表单字符串
        //           document.body.appendChild(div);
        //           document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        //           document.forms[0].submit();*/
        //
        //     }
        // })
        location.href="http://localhost:8080/front_system_war_exploded/wechatpay/test?num="+amount;
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

</script>
</html>